import React,{Component}from 'react'
import './NewUser.less'
import {RightOutline,TruckOutline} from 'antd-mobile-icons'
import {Swiper} from 'antd-mobile'
import CountDown from '../../../components/CountDown'
import { withRouter } from 'react-router-dom'

class NewUser extends Component{
    getSwiper(){
        let items = this.props.items.map((item,index)=>{
          return <Swiper.Item key={index}>
              <div className='goodsCar'>
                <img src={item.img} alt="" />
                <div className="con">
                <div className="price">
                    <i>￥{item.price}</i>
                    <del>￥{item.market_price}</del>
                </div>
                <div className="cart">
                    <TruckOutline style={{'color':'#FF8A80'}}/>
                </div>
                </div>
            </div>
          </Swiper.Item>
        });
        // console.log('items',items);
        return items
      }
    render(){
        
        let items = this.props.items?this.getSwiper(this.props.items):[];

        return(
            <div className='NewUser'>
        <div className="bar"></div>
        <div className="con">
            <div className="head">
                <h3>新人专享</h3>
                <CountDown></CountDown>
                <div className="more">查看更多<RightOutline style={{'fontSize':'.3rem'}}/></div>
            </div>
            <div className="NewUserModule">
                <div className="head">
                    <div className="tag">1重礼</div>
                    <span>新人特价商品专区</span>
                    <i>（限量供应，先到先得）</i>
                </div>
                <Swiper
                trackOffset={10}
                slideSize={32}
                style={{
                    '--border-radius': '.08rem',
                }}
                defaultIndex={0}
                indicatorProps={{'className':'indicator'}}
                >
                {items}
                </Swiper>
            </div>

            <div className="NewUserModule" onClick={()=>this.props.history.push('/coupon')}>
                <div className="head">
                    <div className="tag">2重礼</div>
                    <span>新人通用50元礼券</span>
                    <i>（下单立减，省了又省）</i>
                </div>
                <div className='yhq'>
                    <img src="/uploads/优惠券@3x.png" alt="" />
                    <img src="/uploads/优惠券领取@3x.png" alt="" />
                </div>
            </div>
        </div>
    </div>
        )
    }
}

export default withRouter(NewUser)


